<script setup>
import { ref, onMounted } from 'vue';
import { getStudentHomeworkAPI, getMyStudentsAPI, evaluateStudentHomeworkAPI } from '@/api/teacher';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs'
import { useUserStore } from '@/stores';
const userStore = useUserStore();
const studentHomeworkList = ref([]);
const loading = ref(false);
const studentList = ref([]);
// 获取学生姓名
const getStudentName = (studentId) => {
  const student = studentList.value.find(s => s.studentId === studentId)
  return student ? student.name : '未知学生'
}
// 格式化时间戳
const formatTimestamp = (timestamp) => {
  if (!timestamp) return '';
  return dayjs(timestamp).format('YYYY-MM-DD HH:mm')
}
// 获取学生列表
const getMyStudents = async () => {
  loading.value = true;
  try {
    const { data } = await getMyStudentsAPI();
    if (data.code === 200) {
      studentList.value = data.data;
    }
    if (data.code === 500) {
      ElMessage.error(data.msg);
    }
  } catch (error) {
    ElMessage.error(error);
  } finally {
    loading.value = false;
  }

}
// 获取学生作业完成情况
const getStudentHomework = async () => {
  loading.value = true;
  try {
    const { data } = await getStudentHomeworkAPI();
    if (data.code === 200) {
      studentHomeworkList.value = data.data;
    }
    if (data.code === 500) {
      ElMessage.error(data.msg);
    }
  } catch (error) {
    ElMessage.error('获取作业失败');
  } finally {
    loading.value = false;
  }
};
onMounted(() => {
  getMyStudents()
  getStudentHomework()
});
// 评价作业
const evaluateInfo = ref({
  assignmentId: '',
  studentId: '',
  feedback: '',
  grade: '',
});
const infoDialogVisible = ref(false);
const handleEvaluate = (row) => {
  evaluateInfo.value = {
    assignmentId: row.assignmentId,
    studentId: row.studentId,
    feedback: row.feedback,
    grade: row.grade,
  };
  infoDialogVisible.value = true;
}
// 保存评价信息
const handleSaveInfo = async () => {
  try {
    const { data } = await evaluateStudentHomeworkAPI(evaluateInfo.value.assignmentId, {
      studentId: evaluateInfo.value.studentId,
      feedback: evaluateInfo.value.feedback,
      grade: evaluateInfo.value.grade,
    });
    if (data.code === 200) {
      ElMessage.success('评价成功');
      infoDialogVisible.value = false;
      getStudentHomework();
    } else if (data.code === 500) {
      ElMessage.error(data.msg);
    }
  } catch (error) {
    ElMessage.error('评价失败');
  }
}

const handledownload = (filePath) => {
  const fileurl = "http://localhost:8080/file/" + filePath
  window.open(fileurl)
}
</script>

<template>
  <div class="grade-homework">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>批改作业</span>
        </div>
      </template>

      <el-table :data="studentHomeworkList" stripe style="width: 100%">
        <el-table-column prop="assignmentId" label="作业ID" width="100"></el-table-column>
        <el-table-column label="学生" width="120">
          <template #default="scope">
            <span>{{ getStudentName(scope.row.studentId) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="feedback" label="老师反馈"></el-table-column>
        <el-table-column prop="filePath" label="作业文件">
          <template #default="scope">
            <el-link @click="handledownload(scope.row.filePath)" target="_blank">{{ scope.row.filePath }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="成绩" width="80"></el-table-column>
        <el-table-column label="提交时间" width="180">
          <template #default="scope">
            <span>{{ formatTimestamp(scope.row.submitDate) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button size="small" type="primary" @click="handleEvaluate(scope.row)">评价作业</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog v-model="infoDialogVisible" title="个人信息" width="40%">
      <el-form :model="evaluateInfo" label-width="80px" label-position="left">
        <el-form-item label="作业ID">
          <span>{{ evaluateInfo.assignmentId }}</span>
        </el-form-item>
        <el-form-item label="老师反馈">
          <el-input v-model="evaluateInfo.feedback"></el-input>
        </el-form-item>
        <el-form-item label="成绩">
          <el-input v-model="evaluateInfo.grade"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="infoDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveInfo">保存修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped>
.grade-homework {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>